<template>
  <div class="counter">
    <div class="top">
     <p class="title">预约渠道数据统计</p>
     <p class="bg"></p>
   </div>
   <div class="charts" ref="counter"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
const indicatorList = [{
  name: '机房1',
},
{
  name: '机房2',
},
{
  name: '机房3',
},
{
  name: '机房4',
},
{
  name: '机房5',
}];
const option = {
  backgroundColor: 'rgb(13,34,73)',
  color: ['#0290ff', '#ffe533', '#ff4d4d', '#06f5bc'],
  tooltip: {
    show: true // 弹层数据去掉
  },
  // legend: {
  //   data: [
  //     {
  //       name: '告警', icon: 'rect', itemStyle: {
  //         color: '#ff4d4d', borderWidth: 0 // 设置图例图标的颜色
  //       },
  //     },
  //     {
  //       name: '预警', icon: 'rect', itemStyle: {
  //         color: '#0290ff', borderWidth: 0 // 设置图例图标的颜色
  //       }
  //     },
  //     {
  //       name: '缺陷', icon: 'rect', itemStyle: {
  //         color: '#ffe533', borderWidth: 0 // 设置图例图标的颜色
  //       }
  //     },
  //     {
  //       name: '巡检', icon: 'rect', itemStyle: {
  //         color: '#06f5bc', borderWidth: 0 // 设置图例图标的颜色
  //       }
  //     },
  //   ],
  //   top: 20,
  //   show: true,
  //   y: '1',
  //   center: 0,
  //   itemWidth: 14,
  //   itemHeight: 14,
  //   itemGap: 26,
  //   z: 3,
  //   textStyle: {
  //     fontSize: 14,
  //     color: '#edf8ff',
  //   },
  // },
  radar: {
    center: ['50%', '60%'], // 外圆的位置
    radius: '80%',
    name: {
      textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 400,
        fontFamily: 'PingFangSC-Regular,PingFang SC',
        fontStyle: 'normal',
      }
    },
    // TODO:
    indicator: indicatorList,
    splitArea: {
      // 坐标轴在 grid 区域中的分隔区域，默认不显示。
      show: true,
      areaStyle: {
        // 分隔区域的样式设置。
        color: ['rgba(255,255,255,0)'] // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
      }
    },
    axisLine: {
      // 指向外圈文本的分隔线样式
      lineStyle: {
        color: 'rgba(255,255,255,0)'
      }
    },
    splitLine: {
      lineStyle: {
        type: 'solid',
        color: '#0ac8ff', // 分隔线颜色
        width: 2 // 分隔线线宽
      }
    }
  },
  grid: {
    left: 20,
    bottom: 20,
    top: 20,
    right: 0
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [50, 60, 40, 10, 0],
          name: '告警',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 56, 56, 0.14)' // 0% 处的颜色
                },
                {
                  offset: 0.15, color: 'rgba(255, 56, 56, 0.14)' // 100% 处的颜色
                },
                {
                  offset: 0.75, color: 'rgba(255, 56, 56, 0.4)' // 100% 处的颜色
                },
                {
                  offset: 1, color: 'rgba(255, 56, 56, 0.8)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          symbolSize: [6, 6],
          lineStyle: { //边缘颜色
            //  width: 0
            color: 'rgba(255, 56, 56, 0.8)',
            // shadowBlur:8,
            // shadowColor:'#ff3838'
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#ff6565',
            borderWidth: 1,
            shadowBlur: 8,
            shadowColor: '#ff6565'
          },
        },
        {
          value: [80, 80, 80, 70, 60],
          name: '预警',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: 'rgba(0,194,255, 0.14)' // 0% 处的颜色
                },
                {
                  offset: 0.15, color: 'rgba(0,194,255, 0.14)' // 100% 处的颜色
                },
                {
                  offset: 0.75, color: 'rgba(0,194,255, 0.4)' // 100% 处的颜色
                },
                {
                  offset: 1, color: 'rgba(0,194,255, 0.8)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          symbolSize: [6, 6],
          lineStyle: { //边缘颜色
            //  width: 0
            color: 'rgba(0, 194, 255, 0.8)',
            // shadowBlur:8,
            // shadowColor:'#ff3838'
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#00c8ff',
            borderWidth: 1,
            shadowBlur: 8,
            shadowColor: '#00c8ff'
          },
        },
        {
          value: [50, 40, 70, 50, 60],
          name: '缺陷',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: 'rgba(255, 220, 56, 0.14)' // 0% 处的颜色
                },
                {
                  offset: 0.15, color: 'rgba(255, 220, 56, 0.14)' // 100% 处的颜色
                },
                {
                  offset: 0.75, color: 'rgba(255, 220, 56, 0.4)' // 100% 处的颜色
                },
                {
                  offset: 1, color: 'rgba(255, 220, 56, 0.8)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          symbolSize: [6, 6],
          lineStyle: { //边缘颜色
            //  width: 0
            color: 'rgba(255, 220, 56, 0.8)',
            // shadowBlur:8,
            // shadowColor:'#ff3838'
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#cdbd3e',
            borderWidth: 1,
            shadowBlur: 8,
            shadowColor: '#cdbd3e'
          },
        },

        {
          value: [0, 0, 10, 30, 70],
          name: '巡检',
          areaStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0, color: 'rgba(13, 248, 172, 0.14)' // 0% 处的颜色
                },
                {
                  offset: 0.15, color: 'rgba(13, 248, 172, 0.14)' // 100% 处的颜色
                },
                {
                  offset: 0.75, color: 'rgba(13, 248, 172, 0.4)' // 100% 处的颜色
                },
                {
                  offset: 1, color: 'rgba(13, 248, 172, 0.8)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          },
          symbolSize: [6, 6],
          lineStyle: { //边缘颜色
            //  width: 0
            color: 'rgba(13, 248, 172, 0.8)',
            // shadowBlur:8,
            // shadowColor:'#ff3838'
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#00ffb4',
            borderWidth: 1,
            shadowBlur: 8,
            shadowColor: '#00ffb4'
          },
        },
      ]
    }
  ]
}
const counter = ref()
onMounted(()=>{
  const myCharts = echarts.init(counter.value)
  myCharts.setOption(option)
})

</script>

<style lang="scss" scoped>
  .counter {
    width: 100%;
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    .charts {
      height: 250px;
    }
    .top {
      font-size: 20px;
      color: #fff;
      .title {
        margin-left: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
      }
      .bg {
        background: url(../../images/dataScreen-title.png) no-repeat;
        background-size: 100% 100%;
        width: 68px;
        height: 7px;
        margin-left: 20px;
        
      }
      .txt-right {
        text-align: right;
        margin-right: 20px;
        span {
          color: yellowgreen;
        }
      }
    }
  }
</style>
